<template>
	<view class="j-wallet">
		<view class="j-w-title">{{ userInfo.nickName ? userInfo.nickName+'的钱包' : '未登录'}}</view>
		<view class="j-w-details">
			<view class="j-wallet-card">
				<view class="j-w-row">
					<view class="j-w-item" @click="toMebalance">
						<view class="j-w-top">余额(元)</view>
						<view class="j-w-bottom">￥{{ walletInfo.totalBalance ? walletInfo.totalBalance : '0.00' }}</view>
					</view>
					<view class="j-w-item" @click="toMeIntegral">
						<view class="j-w-top">知豆</view>
						<view class="j-w-bottom">{{ walletInfo.totalIntegral ? walletInfo.totalIntegral : '0' }}</view>
					</view>
				</view>
				<view class="j-w-row">
					<view class="j-w-item" @click="toMeRedEnvelopes">
						<view class="j-w-top">红包(元)</view>
						<view class="j-w-bottom">￥{{ walletInfo.totalShare ? walletInfo.totalShare : '0.00' }}</view>
					</view>
					<view class="j-w-item" @click="toMeAchievement">
						<view class="j-w-top">推广佣金(元)</view>
						<view class="j-w-bottom">￥{{ walletInfo.totalPromote ? walletInfo.totalPromote : '0.00' }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="j-w-record">
			<view class="j-w-card">
				<view class="j-w-card-content">
					<view class="j-w-card-column" @click="toMebalance">
						<view class="j-w-card-column-top">
							<view class="j-w-card-column-top-img">
								<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-w-1.png"></image>
								</view>
						</view>
						<view class="j-w-card-column-bottom">余额账单</view>
					</view>
					<view class="j-w-card-column" @click="toMeIntegral">
						<view class="j-w-card-column-top">
							<view class="j-w-card-column-top-img">
								<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-w-2.png"></image>
								</view>
						</view>
						<view class="j-w-card-column-bottom">知豆记录</view>
					</view>
					<view class="j-w-card-column" @click="toMeRedEnvelopes">
						<view class="j-w-card-column-top">
							<view class="j-w-card-column-top-img">
								<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-w-3.png"></image>
								</view>
						</view>
						<view class="j-w-card-column-bottom">红包记录</view>
					</view>
					<view class="j-w-card-column" @click="toMeAchievement">
						<view class="j-w-card-column-top">
							<view class="j-w-card-column-top-img">
								<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-w-4.png"></image>
								</view>
						</view>
						<view class="j-w-card-column-bottom">推广业绩</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="j-w-logo">
			<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-w-logo.png"></image>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			walletInfo: {},
			userInfo:{}
		};
	},
	onShow() {
		// 我的钱包-查询用户资金统计信息
		this.postFindUserCapitalInfo();
		// 获取用户基本信息
		this.postGetUserInfo();
	},
	methods: {
		// 我的钱包-查询用户资金统计信息
		postFindUserCapitalInfo() {
			this.$u.api
				.postFindUserCapitalInfo()
				.then(res => {
					console.log(res,'[我钱包页面-查询用户资金统计信息]');
					this.walletInfo = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 获取当前登录用户的基本信息
		postGetUserInfo() {
			this.$u.api
				.postGetUserInfo()
				.then(res => {
					console.log(res, '[我钱包页面-获取当前登录用户的基本信息]');
					this.userInfo = res.data;
				})
				.catch(err => {
					console.log(err);
					if (err.status == 401) {
						this.userInfo = {};
					}
				});
		},
		// 跳转我的余额
		toMebalance(){
			this.$u.api
				.postIsLogin()
				.then(res => {
					console.log(res);
					uni.navigateTo({
						url: './balance/balance'
					});
				})
				.catch(err => {
					console.log(err);
					// if (err.status == 401) {
					// 	uni.navigateTo({
					// 		url:'../../login'
					// 	})
					// 	return false;
					// }
				});
		},
		// 跳转我的红包页面
		toMeRedEnvelopes(){
			this.$u.api
				.postIsLogin()
				.then(res => {
					console.log(res);
					uni.navigateTo({
						url:'../vip/red-envelopes/red-envelopes'
					})
				})
				.catch(err => {
					console.log(err);
					// if (err.status == 401) {
					// 	uni.navigateTo({
					// 		url:'../../login'
					// 	})
					// 	return false;
					// }
				});
			
		},
		// 跳转我的知豆页面
		toMeIntegral(){
			this.$u.api
				.postIsLogin()
				.then(res => {
					console.log(res);
					uni.navigateTo({
						url:'./integral/integral'
					})
				})
				.catch(err => {
					console.log(err);
					// if (err.status == 401) {
					// 	uni.navigateTo({
					// 		url:'../../login'
					// 	})
					// 	return false;
					// }
				});
		},
		// 跳转我的推广业绩
		toMeAchievement(){
			this.$u.api
				.postIsLogin()
				.then(res => {
					console.log(res);
					uni.navigateTo({
						url:'./achievement/achievement'
					})
				})
				.catch(err => {
					console.log(err);
					// if (err.status == 401) {
					// 	uni.navigateTo({
					// 		url:'../../login'
					// 	})
					// 	return false;
					// }
				});
		},
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-w-title {
	font-size: 35rpx;
	font-weight: bold;
	padding: 50rpx 48rpx;
}

.j-w-logo{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 55rpx;
	
	image{
		width: 275rpx;
		height: 80rpx;
	}
}

.j-w-record {
	margin-top: 20rpx;
	padding: 0 25rpx;
}

.j-w-details {
	padding: 0 25rpx;

	.j-wallet-card {
		padding: 20rpx 40rpx;
		border-radius: 14rpx;
		background-color: #ffffff;

		.j-w-row {
			display: flex;
			padding: 30rpx 0;

			.j-w-item {
				flex: 1;
				min-width: 350rpx;

				.j-w-top {
					color: #606060;
					font-size: 28rpx;
				}

				.j-w-bottom {
					color: #222222;
					font-size: 35rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}
	}
}

.j-w-card {
	background: #ffffff;
	border-radius: 14px;

	.j-w-card-nav {
		display: flex;
		align-items: center;
		padding: 33rpx 22rpx;
		justify-content: space-between;

		.j-w-card-title {
			color: #121212;
			font-weight: bold;
		}

		.j-w-card-jump {
			display: flex;
			color: #aaaaaa;
			font-size: 22rpx;
			align-items: center;

			.hxf {
				color: #aaaaaa;
				font-size: 28rpx;
				padding-top: 8rpx;
			}
		}
	}

	.j-w-card-content {
		display: flex;
		padding-top: 33rpx;
		padding-bottom: 33rpx;
		align-items: center;
		justify-content: space-around;

		.j-w-card-column {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.j-w-card-column-top {
				.hxf {
					font-size: 42rpx;
					color: #333333;
				}

				.j-w-card-column-top-img {
					width: 44rpx;
					height: 44rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.j-w-card-column-top-bold-text {
					font-size: 35rpx;
					font-weight: bold;
				}
			}

			.j-w-card-column-bottom {
				color: #4f4f4f;
				font-size: 25rpx;
				margin-top: 8rpx;
			}
		}
	}
}
</style>
